<template>
  <!-- 租房合同 -->
  <view class="rentalContract">
    <view class="wrapper" v-if="type == 'add'">
      <view class="title">房屋租赁合同</view>

      <view class="contract-con">
        <view class="pact">
          <view class="pact-lab">出租房(甲方) </view>
          <view class="pact-item">
            <view class="info-row">
              <view class="label">甲方姓名:</view>
              <view class="value">{{ form.hostName }}</view>
            </view>
            <view class="info-row">
              <view class="label">手机号码:</view>
              <view class="value">{{ form.hostMobile }}</view>
            </view>
            <view class="info-row">
              <view class="label">身份证号:</view>
              <view class="value">{{encryptIDCard(form.hostIdcard) }}</view>
            </view>
          </view>
        </view>

        <view class="pact">
          <view class="pact-lab">承租方(乙方) </view>
          <view class="pact-item" style="padding: 0">
            <view class="b-person-wrap" v-for="item in select_list">
              <view class="info-row">
                <view class="label">乙方姓名:</view>
                <view class="value">{{ item.fXm }}</view>
              </view>
              <view class="info-row">
                <view class="label">手机号码:</view>
                <view class="value">{{ item.fLxdh }}</view>
              </view>
              <view class="info-row">
                <view class="label">身份证号:</view>
                <view class="value">{{ encryptIDCard(item.fGmsfhm) }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="pact">
          <view class="pact-lab gray">房屋信息 </view>
          <view class="pact-item grayColor">
            房屋地址:<text class="underLine">
              {{ isTsyfwinfo.bName }}{{ isTsyfwinfo.roomName }}
            </text>
            ,房屋面积:<text class="underLine">{{
              isTsyfwinfo.fFwmj ?  isTsyfwinfo.fFwmj : "/"
            }}</text>㎡
          </view>
        </view>
        <view class="pact">
          <view class="pact-lab gray">租房用途 </view>
          <view class="pact-item grayColor">
            乙方所租房屋仅为<text class="underLine">
              {{ form.rentUse_dict || "" }}
            </text>
            使用;不得进行任何违法活动，否则后果自负。
          </view>
        </view>
        <view class="pact">
          <view class="pact-lab gray">租赁期限 </view>
          <view class="pact-item grayColor">
            <text class="underLine">
              {{ form.beginTime.split("/")[0] }}
            </text>
            年<text class="underLine">
              {{ form.beginTime.split("/")[1] }}
            </text>
            月
            <text class="underLine">
              {{ form.beginTime.split("/")[2] }}
            </text>
            日 至
            <text class="underLine">
              {{
                moment(form.beginTime)
                  .add(form.leaseTerm, "months")
                  .format("YYYY")
              }}
            </text>
            年
            <text class="underLine">
              {{
                moment(form.beginTime)
                  .add(form.leaseTerm, "months")
                  .format("MM")
              }}
            </text>
            月
            <text class="underLine">
              {{
                moment(form.beginTime)
                  .add(form.leaseTerm, "months")
                  .format("DD")
              }}
            </text>
            日。
          </view>
        </view>
        <view class="pact">
          <view class="pact-lab gray">押金及支付方式 </view>
          <view class="pact-item grayColor">
            房屋月租金为<text class="underLine">
              {{ form.rentalRent || "" }}
            </text>
            元，押金为
            <text class="underLine">
              {{ form.securityDeposit || "/" }}
            </text>
            元， 乙方支付租金应在每月
            <text class="underLine">
              {{ form.paymentTerm || "/" }}
            </text>
            日前，合同有效期内，租金不再调整。
          </view>
        </view>

        <view class="pact">
          <view class="pact-lab gray">租赁条款 </view>
          <view class="pact-item grayColor">
            第一条：出租方责任及义务<br />
            1、租赁期内不得无故收回房屋，如甲方中途将房屋收回，甲方应退还剩余房款，须另外补偿因搬迁给乙方造成的费用并交纳壹个月租金作为向乙方的补偿金。<br />
            2、租赁房屋内各项设施如损坏，甲方有义务与相关维修部门联系，进行及时处理。<br />
            第二条：承租方责任及义务<br />
            1、乙方应按照本合同规定的日期和金额交纳租金，逾期未缴付租金，按照所欠租金的0.5%计算滞纳金。超过15日未付清，视为提前终止合同，甲方有权收回房屋。乙方租赁期内不得无故退租，如乙方中途退租，乙方应补偿给甲方壹个月的租金作为补偿；<br />
            2、乙方不得利用此房屋进行非法活动，储藏违法物品或危险物品；<br />
            3、租赁期内未经甲方同意，不得擅自将房屋转租、分租、转让、转借、联营、入股或与他人调剂交换；<br />
            4、乙方应爱护房屋及其设施（详见附件1），室内一切设施属人为损坏，乙方应负责赔偿，属自然损坏，乙方不予赔偿。<br />
            第三条：违约责任<br />
            1、甲方向乙方收取约定合同外的费用，乙方有权拒付。<br />
            2、乙方向甲方提出合同约定外的补偿，甲方有权拒付。<br />
            第四条：租赁期间房屋的维修<br />
            乙方因使用需要，不影响房屋结构的前提下，可对承租房进行维修，但应事先得到甲方和物业管理公司的同意后方可施工，租赁期满后乙方不得拆除已装修部分，不得向甲方索取装修费用。<br />
            第五条：乙方有下列情况之一的，甲方可终止合同，收回房屋。<br />
            1、乙方超过合同规定日期不缴纳租金并押金不足以抵扣租金、滞纳金，且与乙方无法取得联系时，甲方有权请公证处公正撬开房门，室内一切物品由甲方代为保管三个月，若三个月内仍无法与乙方取得联系，甲方有权对保管物品进行处理。<br />
            2、乙方使用此房屋进行违法行为。<br />
            3、未经甲方同意擅自改变房屋结构。<br />
            第六条：免责条件<br />
            1、房屋因不可抗力的因素，导致甲乙双方受损，甲乙双方互不承担责任，甲方因退还乙方剩余租金。<br />
            2、因市政建设需要拆迁或改造已租赁房屋，甲乙双方互不承担责任，但甲方应退还乙方剩余租金。<br />
            第七条：本合同双方均严格执行，在履行中如有争议，双方协商解决，协商不成的，任何乙方均可向有权管辖的人民法院提起民事诉讼。<br />
          </view>
        </view>

        <view class="bothSign">
          <view class="sign-title required-style">甲方签名：</view>
          <view class="id-info">
            <text>{{ form.hostName }}{{ form.hostIdcard }}</text>
            <text class="clear" v-if="form.hostSign" @click="form.hostSign = ''">清除签名</text>
          </view>
          <view class="sign-img">
            <text v-if="!form.hostSign" @click="jump_to_sign('hostSign')">签署姓名</text>
            <image v-else :src="imgPrefix + form.hostSign"></image>
          </view>

          <view class="sign-title required-style" style="margin-top: 50rpx">乙方签名：</view>
          <view class="sign-wrap" v-for="item in select_list">
            <view class="id-info"><text>{{ item.fXm }}{{ item.fGmsfhm }}</text>
              <text class="clear" v-if="item.tenantrySign" @click="clear_tenantry_sign(item)">清除签名</text>
            </view>
            <view class="sign-img">
              <text v-if="!item.tenantrySign" @click="jump_to_sign2('tenantrySign', item.fGmsfhm)">签署姓名</text>
              <image v-else :src="imgPrefix + item.tenantrySign"></image>
            </view>
          </view>

          <view class="sign-title" style="margin-top: 30rpx">签约日期：</view>
          <view class="id-info" style="color: #333333">{{
            moment().format("YYYY-MM-DD")
          }}</view>
        </view>
      </view>

      <view class="btns">
        <button class="reset-btn lt cancelBtn" type="primary" @click="navBack()">
          取消
        </button>
        <button class="submit-btn" type="primary" @click="sunmitHandle">
          提交
        </button>
      </view>
    </view>

    <view class="wrapper" v-else>
      <view class="title">房屋租赁合同</view>

      <view class="contract-con">
        <view class="pact">
          <view class="pact-lab">出租房(甲方) </view>
          <view class="pact-item">
            <view class="info-row">
              <view class="label">甲方姓名:</view>
              <view class="value">{{ form.hostName }}</view>
            </view>
            <view class="info-row">
              <view class="label">手机号码:</view>
              <view class="value">{{ form.hostMobile }}</view>
            </view>
            <view class="info-row">
              <view class="label">身份证号:</view>
              <view class="value">{{ encryptIDCard(form.hostIdcard) }}</view>
            </view>
          </view>
        </view>

        <view class="pact">
          <view class="pact-lab">承租方(乙方) </view>
          <view class="pact-item" style="padding: 0">
            <view class="b-person-wrap" v-for="item in select_list">
              <view class="info-row">
                <view class="label">乙方姓名:</view>
                <view class="value">{{ item.fXm }}</view>
              </view>
              <view class="info-row">
                <view class="label">手机号码:</view>
                <view class="value">{{ item.fLxdh }}</view>
              </view>
              <view class="info-row">
                <view class="label">身份证号:</view>
                <view class="value">{{ encryptIDCard(item.fGmsfhm) }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="pact">
          <view class="pact-lab gray">房屋信息 </view>
          <view class="pact-item grayColor">
            房屋地址:<text class="underLine">
              {{ form.areaName ? form.areaName : '' }}
            </text>
            ,房屋面积:<text class="underLine">{{ form.area ? form.area : '/' }}</text>㎡
          </view>
        </view>
        <view class="pact">
          <view class="pact-lab gray">租房用途 </view>
          <view class="pact-item grayColor">
            乙方所租房屋仅为<text class="underLine">
              {{ form.rentUse }}
            </text>
            使用;不得进行任何违法活动，否则后果自负。
          </view>
        </view>
        <view class="pact">
          <view class="pact-lab gray">租赁期限 </view>
          <view class="pact-item grayColor">
            <text class="underLine">
              {{ moment(form.beginTime).year() }}
            </text>
            年<text class="underLine">
              {{ moment(form.beginTime).month() }}
            </text>
            月
            <text class="underLine">
              {{ moment(form.beginTime).date()}}
            </text>
            日 至
            <text class="underLine">
              {{
                moment(form.beginTime)
                  .add(form.leaseTerm, "months")
                  .format("YYYY")
              }}
            </text>
            年
            <text class="underLine">
              {{
                moment(form.beginTime)
                  .add(form.leaseTerm, "months")
                  .format("MM")
              }}
            </text>
            月
            <text class="underLine">
              {{
                moment(form.beginTime)
                  .add(form.leaseTerm, "months")
                  .format("DD")
              }}
            </text>
            日。
          </view>
        </view>
        <view class="pact">
          <view class="pact-lab gray">押金及支付方式 </view>
          <view class="pact-item grayColor">
            房屋月租金为<text class="underLine">
              {{ form.rentalRent || "" }}
            </text>
            元，押金为
            <text class="underLine">
              {{ form.securityDeposit || "/" }}
            </text>
            元， 乙方支付租金应在每月
            <text class="underLine">
              {{ form.paymentTerm || "/" }}
            </text>
            日前，合同有效期内，租金不再调整。
          </view>
        </view>

        <view class="pact">
          <view class="pact-lab gray">租赁条款 </view>
          <view class="pact-item grayColor">
            第一条：出租方责任及义务<br />
            1、租赁期内不得无故收回房屋，如甲方中途将房屋收回，甲方应退还剩余房款，须另外补偿因搬迁给乙方造成的费用并交纳壹个月租金作为向乙方的补偿金。<br />
            2、租赁房屋内各项设施如损坏，甲方有义务与相关维修部门联系，进行及时处理。<br />
            第二条：承租方责任及义务<br />
            1、乙方应按照本合同规定的日期和金额交纳租金，逾期未缴付租金，按照所欠租金的0.5%计算滞纳金。超过15日未付清，视为提前终止合同，甲方有权收回房屋。乙方租赁期内不得无故退租，如乙方中途退租，乙方应补偿给甲方壹个月的租金作为补偿；<br />
            2、乙方不得利用此房屋进行非法活动，储藏违法物品或危险物品；<br />
            3、租赁期内未经甲方同意，不得擅自将房屋转租、分租、转让、转借、联营、入股或与他人调剂交换；<br />
            4、乙方应爱护房屋及其设施（详见附件1），室内一切设施属人为损坏，乙方应负责赔偿，属自然损坏，乙方不予赔偿。<br />
            第三条：违约责任<br />
            1、甲方向乙方收取约定合同外的费用，乙方有权拒付。<br />
            2、乙方向甲方提出合同约定外的补偿，甲方有权拒付。<br />
            第四条：租赁期间房屋的维修<br />
            乙方因使用需要，不影响房屋结构的前提下，可对承租房进行维修，但应事先得到甲方和物业管理公司的同意后方可施工，租赁期满后乙方不得拆除已装修部分，不得向甲方索取装修费用。<br />
            第五条：乙方有下列情况之一的，甲方可终止合同，收回房屋。<br />
            1、乙方超过合同规定日期不缴纳租金并押金不足以抵扣租金、滞纳金，且与乙方无法取得联系时，甲方有权请公证处公正撬开房门，室内一切物品由甲方代为保管三个月，若三个月内仍无法与乙方取得联系，甲方有权对保管物品进行处理。<br />
            2、乙方使用此房屋进行违法行为。<br />
            3、未经甲方同意擅自改变房屋结构。<br />
            第六条：免责条件<br />
            1、房屋因不可抗力的因素，导致甲乙双方受损，甲乙双方互不承担责任，甲方因退还乙方剩余租金。<br />
            2、因市政建设需要拆迁或改造已租赁房屋，甲乙双方互不承担责任，但甲方应退还乙方剩余租金。<br />
            第七条：本合同双方均严格执行，在履行中如有争议，双方协商解决，协商不成的，任何乙方均可向有权管辖的人民法院提起民事诉讼。<br />
          </view>
        </view>

        <view class="bothSign">
          <view class="sign-title">甲方签名：</view>
          <view class="id-info">
            <text>{{ form.hostName }}{{ form.hostIdcard }}</text>
          </view>
          <view class="sign-img">
            <image :src="imgPrefix + form.hostSign"></image>
          </view>

          <view class="sign-title" style="margin-top: 50rpx">乙方签名：</view>
          <view class="sign-wrap" v-for="item in select_list">
            <view class="id-info"><text>{{ item.fXm }}{{ item.fGmsfhm }}</text>
            </view>
            <view class="sign-img">
              <image :src="imgPrefix + item.tenantrySign"></image>
            </view>
          </view>

          <view class="sign-title" style="margin-top: 30rpx">签约日期：</view>
          <view class="id-info" style="color: #333333">{{
            moment(form.createTime).format("YYYY-MM-DD")
          }}</view>
        </view>
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import moment from "@/utils/moment.js";
  import {
    getAction,
    postAction
  } from "@/utils/request.js";
  import {
    Toast,
    navBack,
    formatters,
    dayTurnTime,
    encryptIDCard
  } from "@/utils/util.js";
  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        allCode: uni.getStorageSync("allCode"),
        select_list: [],
        isTsyfwinfo: {},
        form: {},
        type: "",
        contractId: "",
        isMain: ''
      };
    },
    onLoad(options) {
      console.log(options)
      if (options.type == "add") {
        this.type = "add";
        this.select_list = JSON.parse(options.select_list);
        this.isMain = options.isMain
        this.form = JSON.parse(options.form);
        this.getList();
      } else if (options.type == "rental") {
        this.type = "rental";
        this.contractId = options.contractId;
        this.get_contract_info();
      }

      uni.$on("hostSign", (img) => {
        this.$set(this.form, "hostSign", img);
      });

      uni.$on("tenantrySign", (data) => {
        let {
          img,
          id
        } = data;
        this.select_list = this.select_list.map((item) => {
          if (item.fGmsfhm == id) {
            return {
              ...item,
              tenantrySign: img
            };
          }
          return item;
        });
      });
    },
    onUnload() {
      uni.$off("hostSign");
      uni.$off("tenantrySign");
    },
    onShow() {},
    methods: {
      encryptIDCard,
      formatters,
      dayTurnTime,
      moment,
      navBack,
      async getList() {
        const {
          result: {
            isTsyfwinfo
          },
        } = await getAction("/rentinghouse/rentingHouseInfo", {
          fHouseid: this.form.rentHouseId,
          isMain: this.isMain
        });

        this.isTsyfwinfo = isTsyfwinfo;
      },

      async get_contract_info() {
        let {
          result
        } = await getAction("/rentinghouse/contractDetails", {
          contractId: this.contractId,
        });
        this.form = {
          ...result
        };
        this.select_list = result.rentTenantLandList.map((item) => {
          return {
            ...item,
            fXm: item.tenantryName,
            fLxdh: item.tenantryMobile,
            fGmsfhm: item.tenantryIdcard,
          };
        });
      },

      jump_to_sign(type) {
        uni.navigateTo({
          url: `/rentalHousing/sign?type=${type}`,
        });
      },

      jump_to_sign2(type, id) {
        uni.navigateTo({
          url: `/rentalHousing/sign?type=${type}&id=${id}`,
        });
      },
      clear_tenantry_sign(item) {
        const index = this.select_list.findIndex(
          (i) => i.fGmsfhm == item.fGmsfhm
        );
        this.select_list[index].tenantrySign = "";
      },

      sunmitHandle() {
        if (!this.form.hostSign) {
          Toast("请甲方签名！");
          return
        }
        //如果有没签名的乙方 则进行提示
        let hasNotSign = this.select_list.find(item => !item.tenantrySign)
        if (hasNotSign) {
          Toast("请乙方签名！");
          return
        }
        uni.$emit("electronic_contract_submit", {
          form: this.form,
          select_list: this.select_list,
        });
        navBack();
      },
    },
  };
</script>

<style lang="scss">
  .rentalContract {
    height: 100%;
    background: #fff;
    padding: 16rpx 24rpx;
    display: flex;

    .wrapper {
      padding: 34rpx 0rpx;

      .title {
        padding-bottom: 27rpx;
        text-align: center;
        font-family: Source Han Serif CN, Source Han Serif CN;
        font-weight: bold;
        font-size: 40rpx;
        color: #333333;
      }

      .contract-con {
        border: 1rpx solid rgba(194, 194, 194, 0.3216);
        //   border-bottom: none;

        .pact {
          display: flex;
          justify-content: space-between;

          >view {
            padding: 15rpx;
          }

          .pact-lab {
            display: flex;
            align-items: center;
            width: 35%;
            color: #666666;
            font-size: 26rpx;
            font-weight: 500;
            border-right: 1px solid rgba(194, 194, 194, 0.3216);
            border-bottom: 1px solid rgba(194, 194, 194, 0.3216);
          }

          .pact-item {
            flex: 1;
            color: #333333;
            font-size: 28rpx;
            font-weight: bold;
            border-bottom: 1px solid rgba(194, 194, 194, 0.3216);

            .underLine {
              padding: 0 15rpx;
              word-break: break-all;
              color: #333333;
              font-size: 28rpx;
              font-weight: bold;
              border-bottom: 1px solid #999999;
            }
          }

          .grayColor {
            word-break: break-all;
            color: #999999;
            line-height: 50rpx;
          }

          .gray {
            background: #f3f3f3;
          }
        }

        .bothSign {
          padding: 30rpx 28rpx;

          .sign-title {
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
            position: relative;
          }

          .required-style::before {
            content: '*';
            position: absolute;
            left: -9px;
            color: #f56c6c;
            line-height: 20px;
            font-size: 20px;
            top: 3px;
          }

          .id-info {
            font-weight: 400;
            font-size: 28rpx;
            color: #a1a1a1;
            margin: 20rpx 0 16rpx 0;

            display: flex;
            align-items: center;
            justify-content: space-between;

            .clear {
              color: #ee1c1c;
            }
          }

          .sign-img {
            width: 100%;
            height: 229rpx;
            background: #f9f9f9;
            border-radius: 8rpx;
            border: 1rpx solid #f1eeee;

            line-height: 229rpx;
            text-align: center;
            font-weight: 500;
            font-size: 28rpx;
            color: #2488f5;
            text-decoration: underline;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .info-row {
      display: flex;
      align-items: center;

      &:nth-of-type(2) {
        margin: 15rpx 0;
      }

      .label {
        min-width: 120rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: #a2a0a0;
      }

      .value {
        font-weight: bold;
        font-size: 26rpx;
        color: #333333;
        margin-left: 15rpx;
      }
    }

    .b-person-wrap {
      padding: 15rpx;
      border-top: 1rpx solid #ebebeb;

      &:nth-of-type(1) {
        border: none;
      }
    }
  }
</style>